<template>
	<view class="item" v-for="(item,index) in worklists " :key="item.id" @click="toDetail(item._id)">
		<view class="header">
			<h3>{{item.title}}</h3>
			<view class="price">
				{{item.salary}}
			</view>
		</view>
		<view class="content">
			<view class="info">
				<view class="place">
					{{item.workAddress}} |
				</view>
				<view class="year">
					{{item.workRange}} |
				</view>
				<view class="record ">
					{{item.education}}
				</view>
			</view>
			<view class="sort">
				<view v-for="(welfare,index) in item.welfare" :key="index">{{welfare}}</view>

			</view>
			<view class="corporation" v-for="company in item.companyInfo">
				<view class="left">
					<view class="avatar">
						<image :src="company.logoUrl" mode=""></image>
					</view>
					<view class="corporation_info">
						<view class="corporation_name">
							{{company.title}}
						</view>
						<view class="type">
							<view>
								电子商务
							</view>
							<view>
								{{company.companyType}}
							</view>
							<view>
								{{company.companyNumber}}
							</view>
						</view>
					</view>
				</view>
				<view class="right" @click.stop="dialogToggle(index)">
					立即投递
				</view>


			</view>

			<view>
				<!-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="通知" content="是否投递给该公司!"
						@confirm="dialogConfirm(item)" @close="dialogClose"></uni-popup-dialog>
				</uni-popup>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ['worklists'],
		name: "cardItem",
		data() {
			return {
				type: 'center',
				msgType: 'success',
				sendList: JSON.parse(localStorage.getItem("sendList")) || [], //投递列表
			};
		},
		onLoad() {

		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				});

			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			dialogToggle(index) {
				let token = localStorage.getItem("token")
				console.log(token);
				console.log(token != "");
				if (token != "") {
					this.msgType = 'success';
					// console.log(this.$refs.alertDialog[index]);
					this.$refs.alertDialog[index].open()
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					});

				}

			},
			dialogConfirm(item) {
				console.log('点击确认');
				// console.log(this.sendList);


				// this.sendList = [...this.sendList,item];
				this.sendList.push(item);

				//去重
				let newArr = [];
				for (let i = 0; i < this.sendList.length; i++) {
					if (newArr.indexOf(this.sendList[i]._id) == -1) {
						newArr.push(this.sendList[i]._id);
					} else {
						this.sendList.splice(i, 1);
					};
				};

				console.log(this.sendList);
				localStorage.setItem("sendList", JSON.stringify(this.sendList));
				
				//跳转到聊天页面
				uni.navigateTo({
					url: '/pages/call/call?workid=' + item._id
				});
				



			},
			dialogClose() {
				console.log('点击关闭')
			},
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 30rpx 0rpx 30rpx;
		margin: 0rpx 30rpx;
		border-bottom: 2rpx solid #f4f4f4;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			h3 {
				font-size: 36rpx;
				color: #000;
				font-weight: bold;
			}

			.price {
				font-size: 36rpx;
				color: #279946;
				font-weight: 500;
			}
		}

		.content {

			.info {
				display: flex;
				font-size: 24rpx;
				color: #b1b1b1;
				margin: 20rpx 0rpx;

				view {
					margin-right: 10rpx;
				}
			}

			.sort {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 30rpx;

				view {
					font-size: 24rpx;
					color: #b1b1b1;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0rpx 20rpx;
					border-radius: 10rpx;
					background-color: #f4f4f4;
					margin-right: 10rpx;
					margin-top: 10rpx;
				}

			}

			.corporation {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					.avatar {
						margin-right: 20rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							// position: static;
							z-index: -999;

							img {
								border-radius: 50%;
							}
						}
					}

					.corporation_info {
						.corporation_name {
							font-size: 28rpx;
							color: #333;
						}

						.type {
							display: flex;
							font-size: 20rpx;
							color: #b1b1b1;
							margin-top: 10rpx;

							view {
								margin-right: 16rpx;
							}
						}
					}
				}

				.right {
					// padding: 10rpx 14rpx;
					width: 122rpx;
					height: 42rpx;
					line-height: 42rpx;
					// display: block;
					text-align: center;
					font-size: 24rpx;
					color: #279946;
					border: 4rpx solid #279946;
					border-radius: 30rpx;
					box-sizing: content-box;
				}
			}
		}
	}
</style>
